<template>
  <div class="wrap">
    <!-- todo 头部 -->
    <header class="wrap">
      <a @click="$router.back()" class="left"></a>
      <p>商品分类</p>
    </header>
    <div class="banner"></div>
    <!-- todo 头部 -->

    <!-- todo 列表区 -->
    <main class="list wrap">
      <a class="item ul" v-for="(vl, i) in classList" :key="i">
        <div class="title">{{ vl.title }}</div>
        <router-link tag="div" :to="'/shopList?type=' + vl.title" class="more">
          查看全部
        </router-link>
        <router-link
          tag="span"
          :to="'/shopList?type=' + item"
          v-show="vl.subList"
          v-for="(item, j) in vl.subList"
          :key="j"
          >{{ item }}</router-link
        >
      </a>
    </main>
    <!-- todo 列表区 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      classList: null,
    };
  },
  methods: {
    getClassListFun() {
      this.classList = JSON.parse(
        sessionStorage.getItem("classList")
      ).classList;
    },
  },
  created() {
    this.getClassListFun();
  },
};
</script>

<style lang="scss" scoped>
.banner {
  height: 4px;
  background: #eee;
}

main.list {
  box-sizing: border-box;
  width: 100%;
  padding: 3px 10px 180px;

  > .item {
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    line-height: 27px;
    width: 100%;
    justify-content: space-between;
    color: #000;
    margin-bottom: 5px;

    > div {
      height: 27px;
      width: 50%;
      box-sizing: border-box;
    }

    > .title {
      padding-left: 8px;
      font-weight: bold;
    }

    > .more {
      padding-right: 8px;
      text-align: right;
    }

    &.ul {
      > span {
        width: calc(50% - 1px);
        box-sizing: border-box;
        padding-left: 5px;
        height: 24px;
        line-height: 24px;
        margin: 0 1px 1px 0;
        background: #eee;
      }
    }
  }
}
</style>